import React from 'react'
import { Form, Select, Input, Button } from 'antd'
import PropTypes from 'prop-types'
import ManagerViewer from './ManagerViewer'
const FormItem = Form.Item
const Option = Select.Option

class IcsComponentsSupplierFilterForm extends React.Component {
    state = {
        showViewer: false,
        isEditing: false,
        job_status:[
            {value:1, name: '试用'},
            {value:10, name: '在职'},
            {value:20, name: '离职'}
        ],
        query: {
            search: {}
        }
    }
    componentDidMount () {
    }
    handleReset = () => {
        this.props.form.resetFields()
        this.props.doSearch({clear: true})
    }
    handleSearch = (e) => {
        e.preventDefault()
        this.props.form.validateFields((err, values) => {
            let newValue = {}
            for (let k in values) {
                if (typeof values[k] === 'string') {
                    newValue[k] = values[k].replace(/^\s+|\s+$/g,"")
                } else {
                    newValue[k] = values[k]
                }
            }
            this.props.doSearch(newValue)
        })
    }
    createManager = () => {
        this.setState({showViewer: true, isEditing: false})
    }
    doViewer = () => {
        this.setState({showViewer: false, isEditing: false});
    }
    render () {
        const { getFieldDecorator } = this.props.form
        return <div>
            <Form
                layout="inline"
                className="supplier-filter"
                onSubmit={this.handleSearch}>
                <FormItem
                    label="员工ID"
                    labelCol={{ span: 10 }}
                    wrapperCol={{ span: 14 }}>
                    {getFieldDecorator('user_id', {
                    })(
                        <Input placeholder="请输入员工ID" />
                    )}
                </FormItem>
                <FormItem
                    label="姓名"
                    labelCol={{ span: 10 }}
                    wrapperCol={{ span: 14 }}>
                    {getFieldDecorator('real_name', {
                    })(
                        <Input placeholder="请输入姓名" />
                    )}
                </FormItem>
                <FormItem className="filter-select">
                    <span className="title">在职状态: </span>
                    {getFieldDecorator('job_status')(
                        <Select allowClear style={{ width: 194 }} placeholder="选择状态" onChange={this.onWarrantStatusChange} getPopupContainer={triggerNode => triggerNode.parentNode}>
                            {this.state.job_status.map(v => <Option key={v.value} value={v.value}>{v.name}</Option>)}
                        </Select>
                    )}
                </FormItem>
                <FormItem
                    label="账号:"
                    labelCol={{ span: 10 }}
                    wrapperCol={{ span: 14 }}>
                    {getFieldDecorator('user_name', {
                    })(
                        <Input placeholder="请输入账号" />
                    )}
                </FormItem>
                <FormItem
                    label="联系电话:"
                    labelCol={{ span: 10 }}
                    wrapperCol={{ span: 14 }}>
                    {getFieldDecorator('user_tel', {
                    })(
                        <Input placeholder="请输入联系电话" />
                    )}
                </FormItem>
                <FormItem className="filter-select">
                    <Button type="primary" htmlType="submit" style={{marginRight: 10}} >查询</Button>
                </FormItem>
                <FormItem className="filter-select">
                    <a onClick={this.handleReset}>清除条件</a>
                </FormItem>
                <Button type="primary" style={{marginRight: 10}} onClick={this.createManager}>创建管理员</Button>
            </Form>
            <ManagerViewer showViewer={this.state.showViewer} doSearch={this.props.doSearch} isEditing={this.state.isEditing} doViewer={this.doViewer} />
        </div>

    }
}

IcsComponentsSupplierFilterForm.propTypes = {
    getFieldDecorator: PropTypes.func,
    doSearch: PropTypes.func,
    form: PropTypes.object
}

const IcsComponentsSupplierFilter = Form.create()(IcsComponentsSupplierFilterForm)

export default IcsComponentsSupplierFilter
